---
description: Компонент для позиционирования элементов, построенный на базе grid layout.
---

<Overview group="layout">

# SimpleGrid [tag:component]

Компонент для позиционирования элементов, построенный на базе [grid layout](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout).

</Overview>

<Playground>
  ```jsx
  <SimpleGrid gap="m" columns={3}>
    <Avatar size={48} initials="ДС" gradientColor="orange" />
    <Avatar size={48} initials="ИМ" gradientColor="yellow" />
    <Avatar size={48} initials="ВЖ" gradientColor="violet" />
    <Avatar size={48} initials="ЭМ" gradientColor="green" />
    <Avatar size={48} initials="ВД" gradientColor="blue" />
  </SimpleGrid>
  ```
</Playground>

## Отступ между элементами

Задаётся свойством `gap`.

Принимает значение либо числовое (в пикселях), либо из списка предопределённых
дизайн-системой значений (`"2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"`).

При передаче примитивного значения отступы между строками и столбцами будут одинаковы и равны переданному значению.
При передаче массива (`[row, column]`) есть возможность задать разные значения
для строк (первый элемент массива) и столбцов (второй элемент массива).

## Распределение пространства

Компонент позволяет равномерно распределять элементы в контейнере, указав либо свойство `columns`, либо свойство `minColWidth`
(они взаимоисключающие).

Свойство `columns` отвечает за количество колонок (тогда пространство будет поделено на это заданное количество).

Свойство `minColWidth` отвечает за минимальную ширину каждого элемента (количество колонок будет определено автоматически
с учетом минимальной ширины колонки).

## Выравнивание контента

### Выравнивание по вспомогательной оси

Задаётся свойством `align` и эквивалентно `CSS`-свойству `align-items`.

- `"start"` — элементы располагаются в начале вспомогательной оси;
- `"end"` — элементы располагаются в конце вспомогательной оси;
- `"center"` — элементы располагаются по центру вспомогательной оси;
- `"stretch"` — элементы растягиваются на всё доступное пространство по вспомогательной оси;
- `"baseline"` — элементы располагаются по базовой линии.

## Отступы вокруг контейнера

Задаётся свойством `margin`.

- `"none"` — отступы отсутствуют (по умолчанию);
- `"auto"` — включены платформенные отступы;
- `"auto-inline"` — включены платформенные [`inline`](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_display/Flow_layout)-отступы;
- `"auto-block"` — включены платформенные [`block`](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_display/Flow_layout)-отступы.

Значение `margin="auto"`/`"auto-inline"`/`"auto-block"` нужно для того, чтобы визуально выравнивать контент в `SimpleGrid` с остальными компонентами
VKUI (например, [`Header`](/components/group#header) и [`SimpleCell`](/components/simple-cell)). Поэтому его использование обычно актуально только для верхнеуровневых
компонентов `SimpleGrid`.

<Playground>
  ```jsx
  <Group mode="card" header={<Header size="s">Друзья</Header>}>
    <SimpleGrid gap="m" columns={2} margin="auto">
      <Avatar size={48} initials="ДС" gradientColor="orange" />
      <Avatar size={48} initials="ИМ" gradientColor="yellow" />
      <Avatar size={48} initials="ВЖ" gradientColor="violet" />
      <Avatar size={48} initials="ЭМ" gradientColor="green" />
    </SimpleGrid>
  </Group>
  ```
</Playground>

## Свойства компонентов раскладки

> Компонент `SimpleGrid` обладает общими свойствами, которые позволяют управлять отступами, размерами, позиционированием,
> переполнением и flex-свойствами.
> Подробнее про эти свойства можно почитать на соответствующей странице [`Box`](/components/box/#layout-props).

## Свойства и методы [#api]

<PropsTable name="SimpleGrid" />
